<template>
  <a-button class="audit-reject" @click="openModal()">
    <template #icon><img :src="reject_icon" /></template>
    审核驳回
  </a-button>
  <a-modal
    :body-style="modalBodyStyle"
    v-model:open="visible"
    destroyOnClose
    :footer="null"
    :centered="true"
  >
    <template #title>
      <img style="padding-right: 16px" :src="warning_icon" />
      <span class="modal-title">请确认审核驳回</span>
    </template>
    <a-form
      :model="modalForm"
      name="basic"
      :rules="modalRules"
      :labelCol="{ span: 6, offset: 2 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="auditReject"
    >
      <div class="modal-edit">
        <div class="edit-content">
          <a-form-item name="bhyy" label="驳回原因">
            <a-input
              v-model:value="modalForm.bhyy"
              :autosize="{ minRows: 1, maxRows: 1 }"
              placeholder="请输入驳回原因"
            />
          </a-form-item>
        </div>
        <a-divider></a-divider>
        <div class="footer-content">
          <a-button @click="closeModal">取消</a-button>
          <a-form-item>
            <a-button class="reject" html-type="submit">驳回</a-button>
          </a-form-item>
        </div>
      </div>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import reject_icon from '/src/assets/icon/reject-icon.svg'
import { Rule } from 'ant-design-vue/es/form/interface'
import warning_icon from '/src/assets/icon/warning-icon.svg'
import { ref } from 'vue'

const visible = ref(false)
const emit = defineEmits(['auditReject'])
const modalForm = ref<any>({ bhyy: '' })
const modalBodyStyle = {
  background: '#FFFFFF',
  width: '424px',
  height: '179px',
  padding: '0',
  'border-radius': '8px',
}
const modalRules: Record<string, Rule[]> = {
  bhyy: [{ required: true, message: '请输入驳回原因' }],
}
const auditReject = (): void => {
  emit('auditReject', modalForm.value)
}
const closeModal = (): void => {
  visible.value = false
}

const openModal = (): void => {
  visible.value = true
}
</script>
<style lang="less" scoped>
.audit-reject {
  width: 110;
  height: 32px;
  background: #f60764;
  border-radius: 8px;
  border: 1px solid #ffffff;
  color: #ffffff;
  img {
    margin-right: 5px;
    height: 1rem;
    width: 1rem;
  }
}
.modal-edit {
  height: 100%;
  padding-top: 25px;
  width: 100%;
  .modal-title {
    width: 128px;
    height: 24px;
    font-size: 16px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #1d2c51;
    line-height: 24px;
  }
  .edit-content {
    .ant-input {
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid #c2c7d0;
    }
  }

  .footer-content {
    display: flex;
    justify-content: space-evenly;
    width: 176px;
    float: right;
    .reject {
      width: 78;
      height: 32px;
      background: #f60764;
      border-radius: 8px;
      border: 1px solid #ffffff;
      color: #ffffff;
    }
  }
}
</style>
